import { Card, Empty, Spin } from "antd";
import useFetchData from "../hooks/useFetchData";
import useErrorHandler from "../hooks/useErrorHandler"

const Posts = () => {
  const setVisibleError = useErrorHandler()
  const {data: postsData, loading: postsLoading, error: postsError} =
    useFetchData("postsы");

  if (postsError) return  setVisibleError('Сервер с постами к сожалению почил', postsError)

  if (postsLoading) {
    return <Spin style={{ margin: "50%" }} size="large" />;
  }

  if (postsData.length === 0) {
    return <Empty />;
  }

  return (
    <ul>
      {postsData.map((post) => (
        <Card style={{ marginTop: "20px" }} key={post.id} title={post.title}>
          {post.body}
        </Card>
      ))}
    </ul>
  );
};

export default Posts;
